﻿<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
	html { height: 100% }
	body { height: 100%; margin: 0; padding: 0 }
	
	.dcell {
		margin: 10px;
		padding: 10px;
		
		border: solid 1px;
	}

	#mapcell {		
	}
	
	#outmapcell {
		display: inline;
		float: left;
	}

	#inforcell {
		display: inline;
		float: left;
	}
	
	#geocell {
	
	}
		
	#addrcell {
		
	}
	
	#map_canvas {
		width: 400px;
		height: 400px;
	}
	
</style>
<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">

	var map;
	var hcmCity = new google.maps.LatLng(10.7930593, 106.62913040000001);
	var marker;
	var geoCoder;
	
	var latTxb;
	var lngTxb;
	var addrTxt;

	function initialize() {
	
		geoCoder = new google.maps.Geocoder();
			
		latTxb = document.getElementById("lattxb");
		lngTxb = document.getElementById("lngtxb");
		addrTxt = document.getElementById("addrtxt");
	
		var latlng = hcmCity;
		var myOptions = {
		  zoom: 8,
		  center: latlng,
		  mapTypeId: google.maps.MapTypeId.ROADMAP  
		};
		map = new google.maps.Map(document.getElementById("map_canvas"),
			myOptions);
			
		marker = new google.maps.Marker({
			position: latlng, 
			map: map, 
			title:"Hello World!"
		});
			
		google.maps.event.addListener(map, 'click', function(me) {
				
			noteTarget(me.latLng);
			}
			);		
	}
	
	function noteTarget(latLng) {
	
		latTxb.value = latLng.lat();
		lngTxb.value = latLng.lng();
		
		marker.setPosition(latLng);
		
		if (latLng) {
			
			var geocoderReq = {
				location: latLng
			};
			
			geoCoder.geocode(geocoderReq, function(results, status) {
			
				if (status == google.maps.GeocoderStatus.OK) {
				
					addrTxt.value = results[0].formatted_address;
					
				}
					
			});
		}
	}
  
	function focusOn(latLng) {
	
		noteTarget(latLng);		
		map.panTo(latLng);	
	}
	
	function findTarget(addr) {
	
		if (addr) {
			
			var geocoderReq = {
				address: addr
			};
			
			geoCoder.geocode(geocoderReq, function(results, status) {
			
				if (status == google.maps.GeocoderStatus.OK) {
				
					focusOn(results[0].geometry.location);
					addrTxt.value = results[0].formatted_address;
					
					}
					
			});
		}
	} 

</script>
</head>
<body onload="initialize()">

<div id="mainmap">

	<div id="outmapcell">

		<div class="dcell" id="mapcell">
			<div id="map_canvas"></div>
		</div>
		
	</div>

	<div id="inforcell">

		<div class="dcell" id="geocell">
			<table>
				<tr>
					<td>
						<label for="lattxb">Latitude: </label>
					</td>
					<td>
						<input type="text" name="lattxb" id="lattxb"/>
					</td>
				</tr>
				<tr>
					<td>
						<label for="lngtxb">Longitude: </label>
					</td>
					<td>
						<input type="text" name="lngtxb" id="lngtxb"/>
					</td>
				</tr>
				<tr>
					<td></td>
					<td>
						<input type="button" value="Reset" onclick="focusOn(hcmCity)"/>
					</td>
				</tr>
				<tr>
					<td></td>
					<td>
						<input type="button" value="Focus to" 
						onclick="focusOn(new google.maps.LatLng(
						document.getElementById('lattxb').value,
						document.getElementById('lngtxb').value)
						)"
						/>
					</td>
				</tr>
			</table>
		</div>
		
		<div class="dcell" id="addrcell">
			<table>
				<tr>
					<td>
						<label for="addrtxt">Address: </label>
					</td>
					<td>
						<!--<input type="text" name="addrtxt" id="addrtxt"/>-->
						<textarea rows="2" cols="20" name="addrtxt" id="addrtxt">
						</textarea>
					</td>
				</tr>
				<tr>
					<td></td>
					<td>
						<input type="button" value="Find target" onclick="findTarget(addrTxt.value)"/>
					</td>
				</tr>
			</table>
		</div>

	</div>
	
</div>
</body>
</html>